/*
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-02-01 19:50:50
 * @Description  : 封装v-loading指令
 */

import { createApp } from 'vue'
import type { Directive } from 'vue'
import Loading from './index.vue'

const loading: Directive = {
  mounted(el, binding) {
    const app = createApp(Loading)
    const instance = app.mount(document.createElement('div'))
    el.instance = instance
    el.style.position = 'relative'
    if (binding.value) {
      appendEl(el)
    }
  },
  updated(el, binding) {
    if (binding.value !== binding.oldValue) {
      binding.value ? appendEl(el) : removeEl(el)
    }
  }
}

const appendEl = (el: {
  appendChild: (arg0: any) => void
  instance: { $el: any }
}) => {
  el.appendChild(el.instance.$el)
}

const removeEl = (el: {
  removeChild: (arg0: any) => void
  instance: { $el: any }
}) => {
  el.removeChild(el.instance.$el)
}

export default loading
